<template>
    <view class="inner-container">
        <!-- 自定义  层叠 轮播  -->
        <view class="swiper-wrapper" @tap="showDtl" @touchstart.stop="touch($event, 0)" @touchmove.stop="touch($event, 1)" @touchend.stop="touch($event, 2)">
            <!-- 只给第一个对象 添加动画属性 -->
            <view v-for="(item, index) in data.list?.slice(0, 5)" :key="item.id" class="__swiper_items">
                <u-image :src="`${global.productImageUrl}${item.picId}/0`" :width="`calc(100vw - 30rpx)`" :height="`calc(100vw - 30rpx)`"></u-image>
            </view>
        </view>
        <!-- 信息 及  控制区域 -->
        <view class="info">
            <!-- 左箭头 -->
            <view class="icon icon-left" @click="pre"></view>
            <!-- 信息 -->
            <view class="content" v-if="data.list[0]">
                <view class="good-name">{{ data.list[0].releaseName }}</view>
                <view class="good-price">￥{{ Number(data.list[0].userPrice).toFixed(2) }}</view>
                <view class="advice-price">建议零售价:￥{{ Number(data.list[0].suggestedPrice).toFixed(2) }}</view>
            </view>
            <!-- 右箭头 -->
            <view class="icon icon-right" @click="next"></view>
        </view>
        <!-- 选中项 指示器 -->
        <view class="u-flex u-col-center u-m-b-10">
            <block v-for="(item, index) in data.list.length">
                <view class="block" :class="{ actived: data.current == index }"></view>
            </block>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store'
import { inject, onMounted, reactive } from 'vue'
import global from '@/config'

const userInfo = useUserStore().userInfo

const d = inject<any>('data')

interface dataProps {
    // 定义 洗牌的动画  方向
    leftAn: null // 第一层的动画
    rightAn: null //底下最后一张的动画
    left: null
    right: null
    current: number
    start: Array<any>
    startTime: number
    list: Array<any>
}

const data = reactive<dataProps>({
    // 定义 洗牌的动画  方向
    leftAn: null, // 第一层的动画
    rightAn: null, //底下最后一张的动画
    left: null,
    right: null,
    current: 0,
    start: [],
    startTime: 0,
    list: []
})

onMounted(() => {
    getData()
})

function getData() {
    // 获取商品数据
    let para: any = {
        merchantType: userInfo.type,
        memberId: userInfo.memberId
    }
    let type = d.urls && d.urls[0].urlType
    if (type === 2) para.groupIds = d.urls.map((m:any) => m.urlId)
    if (type === 3) para.labelIds = d.urls.map((m:any) => m.urlId)
    if (type === 4) para.releaseIds = d.urls.map((m:any) => m.urlId)
    if (d.goodsOrder === 0) para.saleSort = 'desc'
    if (d.goodsOrder === 1) para.priceSort = 'desc'
    if (d.goodsOrder === 2) para.multiSort = 'desc'

    para = dealParams(para)
    uni.$u.$api.GoodsApi.queryGoodsReleasePage(para).then((res: any) => {
        data.list = res.records.slice(0, d.quantity)
    })
}

function next() {
    data.current--
    if (data.current < 0) data.current = data.list.length - 1
    let temp = data.list.pop()
    data.list.unshift(temp)
}

function pre() {
    data.current++
    if (data.current > data.list.length - 1) data.current = 0
    let temp = data.list.shift()
    data.list.push(temp)
}

function touch(e: any, type: number) {
    if (type == 0) {
        data.startTime = new Date().getTime()
        data.start = [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
    }
    if (type == 2) {
        let time: number = new Date().getTime() - data.startTime

        if (time > 1000) return

        let offsetY = e.changedTouches[0].pageY - data.start[1]

        if (Math.abs(offsetY) > 100) return

        let offsetX: number = e.changedTouches[0].pageX - data.start[0]

        if (offsetX < -50) pre()
        if (offsetX > 50) next()
    }
}

/**
 * 当前环境下 的 参数处理  去除 空字符串  空数组 null 等情况
 * @param {Object} params 参数对象
 */
function dealParams(params: any) {
    for (let key in params) {
        // 去除空数组
        if (Array.isArray(params[key]) && params[key].length === 0) {
            delete params[key]
        }
        //
        if (params[key] === '' || params[key] == undefined || params[key] == null) {
            delete params[key]
        }
    }
    return params
}

function showDtl() {
    uni.$u.$util.jumpByUrlType(data.list[0].id, 4)
}
</script>

<style lang="scss" scoped>
.inner-container {
    width: 100vw;
    padding: 0 15rpx;
    padding-bottom: 0;
    .swiper-wrapper {
        position: relative;
        height: calc(100vw + 10rpx);
        .__swiper_items {
            // transition: width 4s ease;
            // transition: height 4s ease;
            transition: all 1s ease;
        }
        .__swiper_items:nth-child(1) {
            filter: brightness(100%);
            position: absolute;
            // transform: translateY(0px) scale(1);
            z-index: 5;
        }
        .__swiper_items:nth-child(2) {
            filter: brightness(50%);
            position: absolute;
            transform: translateY(10px) scale(0.9);
            transform-origin: bottom center;
            z-index: 3;
        }
        .__swiper_items:nth-child(3) {
            filter: brightness(20%);
            position: absolute;
            transform: translateY(20px) scale(0.8);
            transform-origin: bottom center;
            z-index: 2;
        }
        .__swiper_items:nth-child(4) {
            position: absolute;
            transform: translateY(0px) scale(1);
            opacity: 0;
            z-index: 1;
        }
        .__swiper_items:nth-child(5) {
            position: absolute;
            transform: translateY(0px) scale(1);
            opacity: 0;
            z-index: 1;
        }
    }
    .second-level {
        height: 20rpx;
        width: 90%;
        background-color: #e1e1e1;
        margin: 0 auto;
    }
    .third-level {
        height: 20rpx;
        width: 70%;
        background-color: #d4d4d4;
        margin: 0 auto;
    }

    .info {
        margin-top: 80rpx;
        display: flex;
        align-items: center;
        .icon {
            font-size: 60rpx;
            color: #999999;
            padding: 20rpx;
        }
        .content {
            flex: 1;
            padding: 0 20rpx;
            .good-name {
                text-align: center;
                font-size: 30rpx;
                font-weight: bold;
                height: 80rpx;
                line-height: 40rpx;
                overflow: hidden;
            }
            .good-price {
                color: red;
                font-size: 46rpx;
                text-align: center;
                line-height: 70rpx;
                font-weight: bold;
            }
            .advice-price {
                font-size: 22rpx;
                line-height: 60rpx;
                text-align: center;
                text-decoration: line-through;
            }
        }
    }
    .block {
        flex: 1;
        height: 1px;
        margin-top: 40rpx;
        background-color: #c1c1c1;
    }
    .actived {
        background-color: #666;
    }
}
</style>
